<template>
  <div>
    <el-dialog
      title="扣分明细"
      :visible="scoreDetailVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      width="640px"
      :close-on-press-escape="false"
      class="dialogForm"
      append-to-body
    >
      <div class="detailBox">
        <div class="exportDetail" @click="exportDetail">
          <el-link type="primary">
            <i class="icon iconfont icondaochu" style="font-size: 14px"></i>
            导出</el-link
          >
        </div>
        <div
          v-for="(v, i) in reduceScoreDetail.reduceScoreDetailInfo"
          :key="i"
          class="everyDetail"
        >
          <div class="reduceTitle color333" style="font-weight: 500">
            {{ v.title }}
          </div>
          <div
            v-if="reduceScoreDetail.type === '1'"
            class="scoreDetail color333"
          >
            <span
              style="display: inline-block; margin-top: 5px; line-height: 30px"
              >{{ tablePeople(v.detail.slice(0, 20))
              }}{{ v.detail.length > 20 ? ' ...' : '' }}</span
            >
          </div>
          <div v-if="reduceScoreDetail.type === '2'" class="scoreDetail">
            <span
              v-for="(item, index) in v.detail.slice(0, 10)"
              :key="index"
              class="detailInfo"
              >{{ item }}</span
            >
            <span v-if="v.detail.length > 10" class="detailInfo">...</span>
          </div>
          <div v-if="reduceScoreDetail.type === '3'" class="scoreDetail">
            <el-table
              :data="v.detail"
              :header-cell-style="{
                background: '#eef1f6',
                color: '#606266',
              }"
              highlight-current-row
              v-loading="loading"
              stripe
              style="border: 1px solid #dfe6ec; margin-top: 10px"
            >
              <el-table-column
                prop="month"
                label="月份"
                align="center"
                width="120px"
              ></el-table-column>
              <el-table-column label="人员姓名" align="center">
                <template slot-scope="scope">
                  {{ tablePeople(scope.row.name.slice(0, 20))
                  }}{{ scope.row.name.length > 20 ? ' ...' : '' }}
                </template>
              </el-table-column>
              <!-- 表格数据为空时，页面显示 -->
              <div slot="empty" v-if="isShow">
                <emptyTable emptyText="暂无相关信息"></emptyTable>
              </div>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'ReduceDialog',
  props: {
    scoreDetailVisible: {
      type: Boolean,
      default: false,
    },
    reduceScoreDetail: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      handleTableData: [],
    }
  },
  created() {},
  methods: {
    // 扣分明细表格数据
    tablePeople(value) {
      return value.join('、')
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    // 导出明细
    exportDetail() {
      window.location.href =
        common.commonApi +
        'api-ps/creditDeductionDetail/expand/exportDedDetail?detailId=' +
        this.reduceScoreDetail.detailId +
        '&type=' +
        this.reduceScoreDetail.type +
        '&reasonsOne=' +
        this.reduceScoreDetail.reduceScoreDetailInfo[0].title +
        '&reasonsTwo=' +
        (this.reduceScoreDetail.reduceScoreDetailInfo[1]
          ? this.reduceScoreDetail.reduceScoreDetailInfo[1].title
          : '') +
        '&access_token=' +
        localStorage.getItem('access_token')
      this.$emit('closeDialog')
    },
  },
}
</script>

<style scoped lang="less">
.detailBox {
  padding-top: 24px;
  min-height: 50px;
  overflow: hidden;
  position: relative;
}
.everyDetail {
  margin-top: 20px;
  line-height: 22px;
}
/deep/ .el-dialog__body {
  padding-top: 0;
}
.detailInfo {
  display: inline-block;
  margin-right: 32px;
  margin-top: 15px;
}
</style>
